<template>
    <el-dialog
        ref="dialogRef"
        v-model="state.visible"
        width="433px"
        :open-delay="1000"
        :custom-class="state.customClass"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
    >
        <template #title />
        <!-- <template #title>
            <span>{{ computedTitle }}</span>
            <button aria-label="close" class="el-dialog__headerbtn" type="button" @click="close">
                <i class="el-dialog__close el-icon el-icon-close"/>
            </button>
        </template> -->
        <div class="el-message-box__header">
            <!-- el-message-box__status el-icon-warning -->
            <div class="el-message-box__title">
                <span>{{ computedTitle }}</span>
            </div>
        </div>
        <div class="el-message-box__content">
            <div class="el-message-box__container">
                <div :class="`el-message-box__status el-message-box__status el-icon-${state.type} iconfont icon-font-${state.type}`" />
                <div class="el-message-box__message" v-html="state.content" />
            </div>
        </div>

        <div class="el-message-box__btns">
            <div class="show-detail" @click="state.collapse = !state.collapse">
                <span :class="getIconClass" />
                <span class="content">{{ state.collapse ? '收起' : '查看详情' }}</span>
            </div>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
        <!-- <el-collapse-transition> -->
        <div v-show="state.collapse" class="detail">
            <div class="outer">
                <div class="content">{{ state.detail }}</div>
            </div>
        </div>
        <!-- </el-collapse-transition> -->
    </el-dialog>
</template>

<script lang="ts">
export default { name: '' }
</script>

<script lang="ts" setup>
import { reactive, ref, nextTick, computed, onMounted } from 'vue'
import { ElDialog, ElButton, ElCollapseTransition } from 'element-plus'

const dialogRef = ref(null)

const state = reactive({
    // props
    content: '',
    detail: '',
    title: '',
    type: '',
    callback: (action: 'confirm' | 'cancel'):void => {},

    visible: true,
    flag: '' as 'confirm' | 'cancel',
    customClass: 'error-alert el-message-box window-alert window-error', // enter-animation
    collapse: false,
})

const computedTitle = computed(() => {
    if (state.title !== '') return state.title
    switch (state.type) {
    case 'error':
        return '错误'
    case 'warning':
        return '警告'
    case 'info':
        return '信息'
    case 'success':
        return '成功'
    default:
        return '提示'
    }
})

const getIconClass = computed(() => {
    const cls = []
    if (state.collapse) cls.push('is-active')
    if (state.collapse) cls.push('el-icon-arrow-up')
    else cls.push('el-icon-arrow-down')
    return cls.join(' ')
})

const close = () => {
    state.flag = 'cancel'
    state.callback('cancel')
}

const confirm = () => {
    state.flag = 'confirm'
    // setTimeout(() => {
    state.callback(state.flag)
    // }, 200)
}

const open = () => {
    state.collapse = false
    state.visible = true
}

onMounted(() => {

})

defineExpose({
    state,
    open,
})
</script>
<style lang="scss">
#error-alert {
    .el-dialog__header {
        display: none;
    }

    .el-message-box__btns {
        position: relative;
        margin-top: 10px;

        .show-detail {
            position: absolute;
            top: 8px;
            left: 4px;
        }
    }

    .detail {
        padding-left: 18px;
    }
}

// #error-alert{
//     .el-overlay-dialog{
//         @keyframes enter{
//             0%   {opacity: 0.4; top: calc(50% - 90px);}
//             100% {opacity: 1; top: calc(50% - 79.5px);}
//         }
//         .error-alert{
//             &.enter-animation{
//                 animation:enter 0.3s;
//             }
//         }
//     }
// }

</style>
